<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style type="text/css">
	*{
	    margin: 0;
	    padding: 0;
	    list-style: none;
	    text-decoration: none;
	}
	.main{
		position:fixed;
		background-color: #cdcdcd;
		height: 100%;
		width:100%;	
	}
	.top{
		height: 50px;
		width: 100%;
		background-color: #323232;
	}
	.spa{
		margin-left: 300px;
		font-size: 23px;
		color: #dddddd;
		height: 50px;
		line-height:50px;
	}
	.inp{
		float: right;
		margin-right: 300px;
		height: 26px;
		width:360px;
		margin-top: 12px;
		border-radius:5px;
		border: 1px;
		color: #757575;
		padding-left: 10px;
		outline: none;
	}
	.mod{

		margin-left: 300px;
		margin-right: 300px;
		width: 600px;
		height: 100%;
		overflow: hidden;
	} 
	.sta{
		margin-top: 30px;
	}
	.sta span{
		font-size: 25px;
		font-weight: 800;

	}
	.bto{
		margin-top: 30px;
		text-align: center;
		font-size: 15px;
		color: #666666;
	}
	.cerl{
		height: 20px;
		width: 20px;
		background-color: white;
		float: right;
		margin-top: 13px;
		margin-right: 50px;
		text-align: center;

		border-radius:50px;
		border:solid rgb(100,100,100) 1px;
	}
	.try{
		height: 30px;
		width: 580px;
		background-color: white;
		border-left: 5px solid #6e999b;
		border-radius:5px 5px 5px 5px;
		padding-top: 5px;
		margin-top: 20px;
	}
	.trychange{
		height: 30px;
		width: 580px;
		background-color: white;
		opacity:0.5;
		border-left: 5px solid #6e999b;
		border-radius:5px 5px 5px 5px;
		padding-top: 5px;
		margin-top: 20px;
	}
	.che{
		height:20px;
		width: 20px;
		margin-left: 20px;
		background-color: red;

	}
	.tex{
		font-size: 20px;
		margin-left: 15px;
		width: 400px;
		height: 90%;
		border: 0;
	}
	.close{
		float: right;
		margin-right: 35px;
   		width: 14px;
    	height: 12px;
    	border-radius: 14px;
    	border: 6px double #FFF;
    	background: #CCC;
    	line-height: 14px;
    	text-align: center;
    	color: #FFF;
    	font-weight: bold;
    	font-size: 14px;
    	cursor: pointer;
	}
	#clearme{
		color: #989898;
		cursor: pointer;
	}
</style>
<body>
	<div class="main">
		<div class="top">
			<span class="spa">ToDoList</span>
			<input type="" name="" class="inp" id="inpp"required="required" placeholder="添加ToDo" onkeydown="show();">
		</div>
		<div class="mod">
			<div class="sta" id="parent">
				<span>正在进行</span>
				<div class="cerl" id="firstNum">0</div>
			</div>
			<div class="sta" id="mother">
				<span>已经完成</span>
				<div class="cerl" id="secNum">0</div>
			</div>
			<div class="bto">
				Copyright © 2014 todolist.cn 
				<a id="clearme" onclick="clearMe();">clear</a>
			</div>
	</div>
</body>
<script type="text/javascript">
	window.onload=function(){
		document.getElementsByClassName('mod')[0].onclick=function(ev){
			var ev = ev || window.event;
			var target = ev.target || ev.srcElement;
				if(target.nodeName.toLocaleLowerCase() == 'input'){
					var aa = target.parentNode.className;
					if (target.className == 'che') {
						switch(aa){
					 	case 'try' :
                            var clone1 = target.parentNode.cloneNode(true);
							clone1.className= 'trychange';
							document.getElementById("mother").appendChild(clone1);
							target.parentNode.remove();
							num()
							num1()
                        break;
                        case 'trychange' :
                           	var clone2 = target.parentNode.cloneNode(true);
							clone2.className= 'try';
							document.getElementById("parent").appendChild(clone2);
							target.parentNode.remove();
							num()
							num1()
                        break;
						}
					}					
				}
			var closeTarget = ev.target || ev.srcElement;
				if(closeTarget.className.toLowerCase() == 'close'){
					closeTarget.parentNode.remove();
					num()
					num1()
				}
		};
	}
	function show () {
		var e=window.event||arguments.callee.caller.arguments[0];
		    if(e.keyCode==13){
		        var con = document.getElementById("inpp").value;
		        AddElement(con);
		        num()
		        document.getElementById("inpp").value = null;
		    }
		}
	function AddElement(con) {
		var parent = document.getElementById("parent");
		var div = document.createElement("div");
			div.setAttribute("class", "try");
			div.setAttribute("name", "alldiv");
			parent.appendChild(div);
		var input1 = document.createElement("input");
			input1.setAttribute("type","checkbox");
			input1.setAttribute("class","che");
			input1.setAttribute("name","mybox");
		var next = parent.lastChild;
			next.appendChild(input1);
		var input2 = document.createElement("input");
			input2.setAttribute("type","text");
			input2.setAttribute("class","tex");
			input2.setAttribute("value",con);
		var next2 = parent.lastChild;
			next2.appendChild(input2);
		var aa = document.createElement("div");
			aa.setAttribute("class", "close");
			aa.innerHTML = "X";
		var next3 = parent.lastChild;
			next3.appendChild(aa);
	}
	function num() {
		var num1 = document.getElementsByClassName("try");
		document.getElementById("firstNum").innerText = num1.length;
	}
	function num1() {
		var num2 = document.getElementsByClassName("trychange");
		document.getElementById("secNum").innerText = num2.length;
	}
	function clearMe() {
		location.reload(); 
	}
</script>
</html>